<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JWT受保护页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .user-info {
            background-color: #e9f7ef;
            border-left: 4px solid #2ecc71;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        .logout-btn {
            background-color: #dc3545;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;
        }
        .logout-btn:hover {
            background-color: #c82333;
        }
        .protected-content {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        .error {
            background-color: #f8d7da;
            border-left: 4px solid #dc3545;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            color: #721c24;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>JWT受保护页面</h1>
        <button class="logout-btn" id="logoutBtn">退出登录</button>
        
        <div class="user-info">
            <h3>用户信息</h3>
            <p>欢迎访问受保护的页面！只有经过身份验证的用户才能看到此内容。</p>
            <div id="userInfo"></div>
        </div>
        
        <div class="protected-content">
            <h3>受保护的内容</h3>
            <p>这是一个受保护的页面，只有携带有效JWT token的用户才能访问。</p>
            <p>您看到这个页面说明您已经成功通过了JWT身份验证。</p>
        </div>
        
        <div id="error" class="error" style="display: none;">
            <p>访问出错，请确保您已正确登录。</p>
        </div>
    </div>

    <script>
        // 获取用户信息
        fetch('/api/auth/profile', {})
        .then(response => {
            if (!response.ok) {
                throw new Error('Token无效');
            }
            return response.json();
        })
        .then(result => {
            // 根据统一API响应格式获取用户数据
            const user = result.data;
            const username = user.username || user.name || user.user || '未知用户';
            const userId = user.userId || user.id || user.sub || '未知ID';
            const roles = user.roles || user.role || [];
            document.getElementById('userInfo').innerHTML = `
                <p><strong>用户ID:</strong> ${userId}</p>
                <p><strong>用户名:</strong> ${username}</p>
                <p><strong>角色:</strong> ${Array.isArray(roles) ? roles.join(', ') : roles}</p>
            `;
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('error').style.display = 'block';
            setTimeout(() => {
                window.location.href = '/login';
            }, 2000);
        });
        
        // 退出登录
        document.getElementById('logoutBtn').addEventListener('click', function() {
            // 清除cookie中的token
            document.cookie = "access_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
            window.location.href = '/login';
        });
    </script>
</body>
</html>